<template>
	<view>
		<view class="box">
			<view class="explain">
				<text>次卡名称:</text>
				<text>{{goods.FName}}</text>
			</view>
			<view class="explain">
				<text>可用次数:</text>
				<text>{{goods.FTime}}</text>
			</view>
			<view class="explain">
				<text>使用限制:</text>
				<text>{{goods.FCardTypeDesc}}</text>
			</view>
			<view class="explain">
				<text>使用门店:</text>
				<text>{{goods.StockName}}</text>
			</view>
			<view class="explain">
				<text style="float: left;">支付方式:</text>
				<view class="way">
					<radio-group @change="onWay">
						<view class="" style="float: left;">
							<text>微信支付</text>
							<radio value="1" :checked="true"></radio>
						</view>
						<!-- <view class="" style="float: left;">
							<text>会员卡支付</text>
							<radio value="2"></radio>
						</view> -->
					</radio-group>
				</view>
			</view>
			<button class="but" id="way" @click="onPay">￥{{goods.FAmount}} 支付</button>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		data() {
			return {
				goods: '',
				payID: 1,
				topupID: 0,
			};
		},
		onLoad(options) {
			this.goods = JSON.parse(options.goodsCard);
			console.log(this.goods);
			// this.goods = options;
		},
		methods:{
			...mapMutations(['onCoupon','onCard']),
			onWay(e){
				this.payID = e.detail.value;
			},
			onPay(e){
				if(this.payID===0){
					this.$api.msg('请选择支付方式！！');
					return;
				}
				let data = {
					TopupType: 3, //充值类型 
					TimeId: this.goods.FItemID, //充值方案Id
					miniType: 'Member',
					PayType: this.payID,//支付方式
				};
				if (this.topupID==0){
					this.onCardPay('MemberShop/WxPayApply', data);
					this.topupID = 1;
				} else {
					this.$api.msg('你的速度太快了，我跟不上');
				}
			},
			onCardPay(url,data){
				uni.showLoading({
					title: '支付中，请稍后'
				})
				this.$util.util(url,data,'GET').then(res=>{
					if (this.payID==2){//会员卡余额支付
						this.topupID = 0;
						setTimeout(()=>{
							uni.hideLoading();
							this.onCard(this.$store.state.cardNumber+this.goods.FTime+this.goods.FSetQty);
							this.$api.msg('会员卡余额支付成功!')
							uni.navigateBack({
								delta: 2,
							})
						},1500)
					}else{//移动支付
						let data = res.respData;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.payTimeStamp,
							nonceStr: data.paynonceStr,
							package: data.payPackage,
							signType: data.paySignType,
							paySign: data.paySign,
							success: (res) => {
								this.onCard(this.$store.state.cardNumber+this.goods.FTime+this.goods.FSetQty);
								this.$api.msg('成功');
								this.topupID = 0;
								setTimeout(()=>{
									uni.navigateBack({
										delta: 2,
									})
								},200)
							},
							fail: (error) => {
								console.log(error);
								this.topupID = 0;
								if(error.errMsg=="requestPayment:fail cancel"){
									this.$api.msg('您已取消支付');
								}else{
									this.$api.msg('支付失败');
								}
							},
							complete: (data) => {
								uni.hideLoading();
							}
						})
					}
				}).catch(error=>console.log(error));
			},
		}
	}
</script>

<style lang="scss">
	.box{
		padding: 50upx 30upx;
		.explain{
			width: 100%;
			display: inline-block;
			margin: 20upx 0;
			font-size: 32upx;
			text:first-child{
				color: #A2A2A2;
				margin-right: 20upx;
			}
			text:last-child{
				color: #000;
				font-weight: bold;
			}
		}
		.way{
			view{
				margin-right: 30upx;
			}
			text{
				color: #000 !important;
				font-weight: bold;
			}
		}
		#way{
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			background-color: #FF9011;
			color: #fff;
			font-size: 40upx;
			border-radius: 50upx;
			margin: 40upx 0;
		}
	}
</style>
